<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/commonPage/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>联盟介绍</title>
</head>
<body class="inner-container" style="margin-top: 6%; padding: 0 auto; min-width:1024px;min-height:  500px;">
<div align="center" style="margin-bottom: 40px;">
    <input type="text"  class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius"
              placeholder="请输入检索信息" id="search" style="height: 40px;width: 200px"/>
</div>

<ul id="LAY_demo1" >
    <hr style="width:55%; text-align:center;margin:10px auto">
</ul>


<script type="text/javascript">
    layui.use('flow', function(){
        var flow = layui.flow;
        function getList(){
        flow.load({
            elem: '#LAY_demo1' //指定列表容器
            ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                var lis = [];
                $.ajax({
                    url: "${base}/MembersController/getMembersList",
                    type: "POST",
                    data: {
                        "page":page,
                        "keyWord": $("#search").val()
                    },
                    dataType: "json",
                    success: function (res) {
                        console.log(page)
                            var lis = [];
                            for(var i = 0; i < res.data.length; i++){
                                var d=res.data[i]
                                lis.push('<li><div align="center" id="container">\n' +
                                    '        <div style="position: relative; left: 0; top: 0; height: 45%; width: 55%; ">\n' +
                                    '            <div style="position: absolute; left: 1%; top: 3%;bottom:3%; height: 94%; width: 25%; background-color: #ff0;">\n' +
                                    '                <img src="'+(d.logoUrl)+'" style="height:100%;width:100%;"/>\n' +
                                    '            </div>\n' +
                                    '            <div style="position: absolute; left: 28%;top: 3%;width: 70%;height:94%;background-color: #FFFFFF;">\n' +
                                    '\n' +
                                    '                <div style="height:13%;">\n' +
                                    '                    <div style="position: absolute;left:2em"><p style="font-size: 2vw;">'+(d.username)+'</p></div>\n' +
                                    '\n' +
                                    '                    <div style="float:right;padding-right:2%">\n' +
                                    '                        <button onclick="getCertificate('+d.uid+')" id="getCertificate"\n' +
                                    '                                 class="layui-btn" style="height: 100%">查看证书</button>\n' +
                                    '                    </div>\n' +
                                    '                </div>\n' +
                                    '\n' +
                                    '                <div style="position: relative;height: 13%; ">\n' +

                                    '                    <div style="position: absolute;left:2em"><p style="font-size: 2vw;">'+(d.position)+'</p></div>\n' +
                                    '                </div>\n' +
                                    '                <div style=" height: 74%;font-size: 1.5vw;"  align="left">\n' +
                                    '                    <p style="text-indent:2em;height: 100%;width: 100%;color:rgb(120,120,120) " >'+(d.context)+'</p>\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '        </div>\n' +
                                    '    </div></li><hr style="width:55%; text-align:center;margin:10px auto">')
                            }
                            next(lis.join(''), page < res.pages);
                    }
                })
            }
        });
        }
        getList();

        $("#search").bind("input propertychange", function (event) {
            $('#LAY_demo1').html('')
            getList()
        });
    });
    function getCertificate(data) {
        var html;
        $.ajax({
            url: "${base}/MembersController/getMemberCerticicate",
            type: "POST",
            data: {
                "uid": data
            },
            dataType: "text",
            success: function (res) {
                var obj=JSON.parse(res)
                html="<img src="+obj.certificate+" style='height:100%;width:100%;'>"
                layer.open({
                    type: 1
                    ,title: false //不显示标题栏
                    ,closeBtn: true
                    ,area:  ['1100px', '660px']
                    ,offset: '180px'
                    ,shade: 0.8
                    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content:html
                    ,success: function(layero){
                    }
                });
            }
        })
    }


</script>
</body>
</html>